import { Alert, Tabs, TabItem } from '@aws-amplify/ui-react';
import { TerminalCommand } from '@/components/InstallScripts';

## 3.x to 4.x
### Installation
Install the 4.x version of the `@aws-amplify/ui-angular` library.

<Tabs>
<TabItem title="npm">
<TerminalCommand command="npm install @aws-amplify/ui-angular@4.x" />
</TabItem>
<TabItem title="yarn">
<TerminalCommand command="yarn add @aws-amplify/ui-angular@4.x" />
</TabItem>
</Tabs>

### Update and usage

`@aws-amplify/ui-angular@4.x` introduces the following breaking changes:

#### 1. `@aws-amplify/ui-angular@4.x` bumps minimum Angular version to 14

If your application is on Angular 13 or older, please migrate to Angular 14+ as per [official guide](https://update.angular.io).

#### 2. `@aws-amplify/ui-angular@4.x` requires `@aws-amplify/ui-angular/theme.css` to be imported via `angular.json`

Previous version of `@aws-amplify/ui-angular` required `@aws-amplify/ui-angular/theme.css` to be in your global CSS file. To migrate, you should first remove the style import from your global CSS:

```diff
- @import '~@aws-amplify/ui-angular/theme.css';
```

Then open your `angular.json` file, and add `node_modules/@aws-amplify/ui-angular/theme.css` to `styles` array. This array is located in `projects.<project-name>.architect.build.options`.

```diff
"styles": [
+ "node_modules/@aws-amplify/ui-angular/theme.css",
  "src/styles.css"
],
```

## 2.x to 3.x
### Installation
Install the 3.x version of the `@aws-amplify/ui-angular` library and the 5.x version of the `aws-amplify` library.

<Tabs>
<TabItem title="npm">
<TerminalCommand command="npm install aws-amplify@5.x @aws-amplify/ui-angular@3.x" />
</TabItem>
<TabItem title="yarn">
<TerminalCommand command="yarn add aws-amplify@5.x @aws-amplify/ui-angular@3.x" />
</TabItem>
</Tabs>

### Update and usage

`@aws-amplify/ui-angular@3.x` introduces the following breaking changes:

#### 1. `@aws-amplify/ui-angular@3.x` bumps minimum Angular version to 12

If your application is on Angular 11 or older, please migrate to Angular 12+ as per [official guide](https://update.angular.io).

*Note*: Going forward, `@aws-amplify/ui-angular` will have the same version support as Angular's official LTS [support window](https://angular.io/guide/releases#actively-supported-versions). 

#### 2. `@aws-amplify/ui-angular@3.x` migrates Angular compiler to IVY

`@aws-amplify/ui-angular@3.x` drops support for legacy View engine, and migrated to the [Ivy compiler](https://docs.angular.lat/guide/ivy). Please migrate to Angular 12+, and make sure you did not disable Ivy in your `tsconfig.json`. In particular, please remove `"enableIvy": false` in your `tsconfig.json`:

```diff
{
  ...,
  "angularCompilerOption": {
-    "enableIvy": false
  }
}
```

#### 3. `@aws-amplify/ui-angular@3.x` moves automatic signin on signup logic to `aws-amplify`. 

If you are overriding `Auth.signUp`, update the override function call to include the `autoSignIn` option set to `enabled`. If this change is not made, users will not be automatically signed in on signup.

```diff
 async handleSignUp(formData) {
  let { username, password, attributes } = formData;
  // custom username
  username = username.toLowerCase();
  attributes.email = attributes.email.toLowerCase();
  return Auth.signUp({
    username,
    password,
    attributes,
+   autoSignIn: {
+     enabled: true
+   }
  });
}

```

#### 4. `@aws-amplify/ui-angular@3.x` removes legacy i18n translation keys

We replaced following legacy Authenticator texts:

- `Confirmation Code` in confirm sign up screen is replaced by `Enter your Code`
- `Send Code` in reset password screen is replaced by `Send code`.
- `Send Code` in confirm reset password screen is replaced by `Submit`
- `Forgot your password? ` with the trailing space is replaced by `Forgot your password`.

If you were using `I18n` to translate those keys, please update your translations accordingly to match the new strings.

#### 5. `@aws-amplify/ui-angular@3.x` removes legacy component exports

The following deprecated components imported from `@aws-amplify/ui-angular/legacy` are removed:

- [AmplifyChatbot](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md)
- [AmplifyPhotoPicker](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-photo-picker/readme.md)
- [AmplifyPicker](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-picker/readme.md)
- [AmplifyS3Album](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-album/readme.md)
- [AmplifyS3Image](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-image/readme.md)
- [AmplifyS3ImagePicker](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-image-picker/readme.md)
- [AmplifyS3Text](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-text/readme.md)
- [AmplifyS3TextPicker](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-text-picker/readme.md)

If you wish to still use the legacy components, you can do so by installing `@aws-amplify@2.x` under an alias:

<Tabs>
<TabItem title="npm">
<TerminalCommand command="npm install @aws-amplify/ui-angular-v2@npm:@aws-amplify/ui-angular@^2.4.27" />
</TabItem>
<TabItem title="yarn">
<TerminalCommand command="yarn add @aws-amplify/ui-angular-v2@npm:@aws-amplify/ui-angular@^2.4.27" />
</TabItem>
</Tabs>

Then you can use the legacy components by registering `LegacyAmplifyUiModule` in your `app.module.ts`:


```ts{4,11}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';
import { LegacyAmplifyUiModule } from '@aws-amplify/ui-angular-v2/legacy';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AmplifyAuthenticatorModule, LegacyAmplifyUiModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

For more details on how to use the components, please see the [v1 documentation](https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-angular).

## 1.x to 2.x
### Installation

Install the 2.x version of the `@aws-amplify/ui-angular` library.

<Tabs>
<TabItem title="npm">
<TerminalCommand command="npm install aws-amplify @aws-amplify/ui-angular@2.x" />
</TabItem>
<TabItem title="yarn">
<TerminalCommand command="yarn add aws-amplify @aws-amplify/ui-angular@2.x" />
</TabItem>
</Tabs>

### Update

Update the **app.module.ts** with the new `AmplifyAuthenticatorModule` and remove the old `AmplifyUIAngularModule` as seen below:

**app.module.ts**

```diff
- import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';;
+ import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';

import { AppComponent } from './app.component';
import awsconfig from '../aws-exports';

Amplify.configure(awsconfig);

@NgModule({
  declarations: [AppComponent],
+ imports: [BrowserModule, AmplifyAuthenticatorModule],
- imports: [AmplifyUIAngularModule, BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}


);

```

You'll also have to import the styles in the `styles.css` file.

```
@import '~@aws-amplify/ui-angular/theme.css';
```

### Usage

Using the `Authenticator` component is similar to the `1.x` usage.

Below is an example of how to create an Authenticator.

**app.component.html**

```diff
- <amplify-authenticator usernameAlias="email">
-  <amplify-sign-up
-    slot="sign-up"
-  ></amplify-sign-up>
-  <amplify-sign-in slot="sign-in" usernameAlias="email"></amplify-sign-in>
- </amplify-authenticator>
+ <amplify-authenticator>
+  <ng-template
+    amplifySlot="authenticated"
+    let-user="user"
+    let-signOut="signOut"
+  >
+    <h1>Welcome {{ user.username }}!</h1>
+    <button (click)="signOut()">Sign Out</button>
+  </ng-template>
+</amplify-authenticator>

```

### Breaking changes

The 2.x version of the `Authenticator` component has several differences from earlier versions. Here are a few of the major changes that you'll need to look out for.

### Slots

All the slot locations have changed with the 2.x version of the `Authenticator`. To get a
sense of the changes please check out the [Headers and Footers](../connected-components/authenticator/customization#headers--footers) section.

### Form Fields

The 2.x version of the `Authenticator` has a different format for the `formFields` prop. It also no longer accepts
`inputProps` nor `hint`. Instead, it's recommended that you use the [Headers and Footers Slots](../connected-components/authenticator/customization#headers--footers) or use the
[Sign Up Fields custimization](../connected-components/authenticator/customization#sign-up-fields). For more information on form field customizations
please see the [Form Field Customization](../connected-components/authenticator/customization#form-field-customization) section.

### CSS Styling

The 2.x version of the `Authenticator` has a completely different set of CSS variables. Please look over the [Amplify CSS Variables](../connected-components/authenticator/customization#styling) section for more information.

### `onAuthUIStateChange`

Previous versions of `Authenticator` exposed a `onAuthUIStateChange` handler to detect Auth state changes. For similar functionality see [AuthenticatorService](/angular/connected-components/authenticator/advanced#authenticator-service).